<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>用户管理</title>
  {% include 'rbac/common/main-header.html' %}
  <style>
    /* 外层容器 */
    .container {
      display: flex;
      justify-content: space-between; /* 让盒子1和盒子2首尾居中分布 */
      align-items: center;
    }

    /* 盒子1 */
    .box1 {
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* 让盒子3和盒子4竖直方向首尾分布 */
    }

    /* 盒子3 */
    .box3 {
      display: flex;
      justify-content: space-between; /* 让小盒子们水平等距分布 */
    }

    /* 盒子4 */
    .box4 {
      display: flex;
      justify-content: space-between; /* 让小盒子们水平等距分布 */
    }
  </style>
</head>
<body class="pear-container">
<!-- 筛选查询 -->
<div class="layui-card">
  <div style="padding: 15px 60px 0 15px;">
    <form class="layui-form" action="">
      <div class="container">
        <div class="box1">
          <div class="box3">
            <div class="small-box">
              <div class="layui-form-item">
                <label class="layui-form-label">操作者</label>
                <div class="layui-input-inline layui-input-wrap">
                  <input type="text" name="user" autocomplete="off" lay-affix="clear" class="layui-input">
                </div>
              </div>
            </div>
            <div class="small-box">
              <div class="layui-form-item">
                <label class="layui-form-label">操作表</label>
                <div class="layui-input-inline layui-input-wrap">
                  <input type="text" name="model_name" autocomplete="off" lay-affix="clear" class="layui-input">
                </div>
              </div>
            </div>
            <div class="small-box">
              <div class="layui-form-item">
                <label class="layui-form-label">操作类型</label>
                <div class="layui-inline">
                  <select name="action">
                    <option value="">操作类型</option>
                    <option value="create">新增</option>
                    <option value="update">修改</option>
                    <option value="delete">删除</option>
                    \
                    <option value="m2m_change">多对多</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="box4">
            <div class="small-box">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">时间范围</label>
                  <div class="layui-inline" id="ID-laydate-range-log">
                    <div class="layui-input-inline">
                      <input type="text" autocomplete="off" id="ID-laydate-start-date-log" class="layui-input" placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                      <input type="text" autocomplete="off" id="ID-laydate-end-date-log" class="layui-input" placeholder="结束日期">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="small-box">
              <div class="layui-form-item">
                <label class="layui-form-label">状态码</label>
                <div class="layui-inline">
                  <select name="status">
                    <option value="">请选择</option>
                    <option value="200">200</option>
                    <option value="500">500</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box2">
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button
                type="submit"
                class="layui-btn"
                lay-submit
                lay-filter="log-get-form-btn"
              >
                开始查询
              </button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- 日志列表 -->
<div class="layui-row layui-col-space15">
  <div class="layui-card">
    <div class="layui-card-body">
      <table
        class="layui-hide"
        id="log-table"
        lay-filter="log-table"
      ></table>
    </div>
  </div>
</div>
</body>
<script type="text/html" id="log-tool">
  <div class="layui-btn-container">
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-bg-red"
      lay-event="log-remove"
    >
      <i class="layui-icon layui-icon-delete"></i>删除
    </button>
  </div>
</script>
{% include 'rbac/common/main-footer.html' %}
<script>
  let token = "{{ csrf_token }}";
  solve_csrf(token)

  layui.use(["table", "popup", "form", "tree", "laydate", 'util'], function () {
    let table = layui.table;
    let popup = layui.popup;
    let $ = layui.$;
    let form = layui.form;
    let tree = layui.tree;
    let laydate = layui.laydate;
    let util = layui.util;

    // 日期范围 - 左右面板独立选择模式
    let startTime;
    let endTime;
    laydate.render({
      elem: '#ID-laydate-range-log',
      range: ['#ID-laydate-start-date-log', '#ID-laydate-end-date-log'],
      done: function (value, date, endDate) {
        startTime = date.year + "-" + date.month + "-" + date.date; //开始时间
        endTime = endDate.year + "-" + endDate.month + "-" + endDate.date; //结束时间
      }
    });

    // 构建查询条件参数,作为用户表格数据api的?params参数
    let searchParams;
    form.on("submit(log-get-form-btn)", function (data) {
      searchParams = {...data.field, start_time: startTime, end_time: endTime}
      init_log_table();
      return false;
    });

    function init_log_table() {
      // 用户列表
      table.render({
        elem: "#log-table",
        url: "/api/v1/log/table/",
        where: searchParams,
        height: "full-35",
        toolbar: "#log-toolbar",
        page: true,
        cols: [[
          {type: "checkbox", width: 50, fixed: "left"},
          {field: "id", title: "ID", width: 80, sort: true},
          {field: "user", title: "操作者", width: 100},
          {field: "action", title: "操作类型", width: 100},
          {field: "model_name", title: "操作表", width: 120, hide: true},
          {field: "object_id", title: "对象ID", width: 100, hide: true},
          {field: "object_repr", title: "对象描述", width: 150, hide: true},
          {field: "url", title: "请求URL", width: 200},
          {field: "browser", title: "浏览器", width: 200},
          {field: "ip_address", title: "IP地址", width: 130},
          {field: "status", title: "状态码", width: 100},
          {field: "message", title: "详细信息", width: 250},
          {field: "create_datetime", title: "创建时间", width: 160, sort: true},
          {title: "操作", width: 100, toolbar: "#log-tool", align: "center", fixed: "right"}
        ]],
      });
    }

    init_log_table();

    // 行工具栏事件 - 删除
    table.on("tool(log-table)", function (obj) {
      if (obj.event === "log-remove") {
        window.log_remove(obj);
      }
    });

    window.log_remove = function (obj) {
      layer.confirm('确定要删除这条 [' + obj.data.action + '] 类型的日志?', {icon: 3, title: '提示'}, function (index) {
        layer.close(index)
        let url = "/api/v1/log/del/"
        let data = {id: obj.data.id}
        deleteAjaxRequest(popup, obj, url, data)
      })
    }
  })
</script>
</html>


